TypeScript 空气质量：环境健康类型安全的指南

            // Define the specific pollutants we will track
export type Pollutant = 'PM2.5' | 'PM10' | 'O3' | 'NO2' | 'SO2' | 'CO';

// Define the possible units of measurement
export type Unit = 'µg/m³' | 'ppm' | 'ppb';

// An interface for a single pollutant measurement
export interface PollutantMeasurement {
    pollutant: Pollutant;
    value: number;
    unit: Unit;
    timestamp: string; // ISO 8601 format, e.g., "2023-10-27T10:00:00Z"
}

// An interface for geographic coordinates
export interface GeoLocation {
    latitude: number;
    longitude: number;
}

// A comprehensive interface for a single air quality reading from a station
export interface AirQualityStationData {
    stationId: string;
    stationName: string;
    location: GeoLocation;
    measurements: PollutantMeasurement[];
}
            

              
                Copy
              
            
          

            // Define the different AQI standards we support
export enum AQIStandard {
    US_EPA = 'US_EPA',
    EU_CAQI = 'EU_CAQI',
    CN_MEP = 'CN_MEP', // China Ministry of Environmental Protection
}

// Define the standard AQI health categories
export type AQICategory = 
    | 'Good'
    | 'Moderate'
    | 'Unhealthy for Sensitive Groups'
    | 'Unhealthy'
    | 'Very Unhealthy'
    | 'Hazardous';

// An interface to hold the final, calculated AQI result
export interface AQIResult {
    standard: AQIStandard;
    value: number;
    category: AQICategory;
    dominantPollutant: Pollutant;
    healthAdvisory: string; // A human-readable health message
}

// We can now combine the station data with its calculated AQI
export interface EnrichedStationData extends AirQualityStationData {
    aqi: AQIResult;
}
            

              
                Copy
              
            
          

            // Type definition for the raw data we expect from the external API
interface ApiStationResponse {
    status: 'ok' | 'error';
    data?: {
        id: number;
        name: string;
        geo: [number, number]; // [latitude, longitude]
        pollutants: {
            pm25?: { v: number };
            o3?: { v: number };
            no2?: { v: number };
        }
    }
}
            

              
                Copy
              
            
          

            import { AirQualityStationData, PollutantMeasurement } from './types';

// A type guard to validate the API response
function isValidApiResponse(data: any): data is ApiStationResponse {
    return data && data.status === 'ok' && typeof data.data?.id === 'number';
}

async function fetchStationData(stationId: number): Promise<AirQualityStationData> {
    const response = await fetch(`https://api.fictional-aq.com/station/${stationId}`);
    if (!response.ok) {
        throw new Error('Network response was not ok.');
    }

    const rawData: unknown = await response.json();

    // Validate the data at the boundary!
    if (!isValidApiResponse(rawData) || !rawData.data) {
        throw new Error('Invalid or error response from API.');
    }

    // If validation passes, we can now safely transform it to our internal model
    const apiData = rawData.data;
    const measurements: PollutantMeasurement[] = [];

    if (apiData.pollutants.pm25) {
        measurements.push({
            pollutant: 'PM2.5',
            value: apiData.pollutants.pm25.v,
            unit: 'µg/m³', // Assuming unit based on API documentation
            timestamp: new Date().toISOString(),
        });
    }
    if (apiData.pollutants.o3) {
        measurements.push({
            pollutant: 'O3',
            value: apiData.pollutants.o3.v,
            unit: 'ppb',
            timestamp: new Date().toISOString(),
        });
    }
    // ... and so on for other pollutants

    const cleanData: AirQualityStationData = {
        stationId: apiData.id.toString(),
        stationName: apiData.name,
        location: {
            latitude: apiData.geo[0],
            longitude: apiData.geo[1],
        },
        measurements: measurements,
    };

    return cleanData;
}

            

              
                Copy
              
            
          

            import React, { useState, useEffect } from 'react';
import { AQIResult, AQICategory } from './types';

interface AQIDisplayProps {
    aqiResult: AQIResult | null;
    isLoading: boolean;
}

const getCategoryColor = (category: AQICategory): string => {
    const colorMap: Record<AQICategory, string> = {
        'Good': '#00e400',
        'Moderate': '#ffff00',
        'Unhealthy for Sensitive Groups': '#ff7e00',
        'Unhealthy': '#ff0000',
        'Very Unhealthy': '#8f3f97',
        'Hazardous': '#7e0023',
    };
    return colorMap[category];
};

export const AQIDisplay: React.FC<AQIDisplayProps> = ({ aqiResult, isLoading }) => {
    if (isLoading) {
        return <div>Loading air quality data...</div>;
    }

    if (!aqiResult) {
        return <div>Could not retrieve air quality data.</div>;
    }

    const cardStyle = {
        backgroundColor: getCategoryColor(aqiResult.category),
        padding: '20px',
        borderRadius: '8px',
        color: aqiResult.category === 'Moderate' ? '#000' : '#fff',
    };

    return (
        <div style={cardStyle}>
            <h2>Current Air Quality</h2>
            <p style={{ fontSize: '2.5rem', fontWeight: 'bold' }}>{aqiResult.value}</p>
            <p>{aqiResult.category} ({aqiResult.standard})</p>
            <em>Dominant Pollutant: {aqiResult.dominantPollutant}</em>
            <p style={{ marginTop: '15px' }}>{aqiResult.healthAdvisory}</p>
        </div>
    );
};

            

              
                Copy